<template>
  <view class="home-container">
    <nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" @closed="onClosed"
      :cover="state.cover" />
    <nut-popup v-model:visible="visibleFlag" position="bottom" :style="{ height: '40%', padding: '30px 0px' }" closeable
      round safe-area-inset-bottom>
      <div class="popup-movie-detail">
        <div class="row1">
          <image src="http://supportmaster.liangpiao.net.cn/chuanshuo.jpg" style="width: 120px;border-radius: 6px;"
            mode="widthFix"></image>
          <div class="right">
            <div class="goods-title">电影《传说》专属·全国通兑券</div>
            <div class="goods-price" v-if="goodsDetail.price"><span>￥</span><span>{{ (goodsDetail.price /
      100).toFixed(2) }}</span></div>


          </div>
        </div>
        <nut-divider style="color: #eee;" />
        <!-- <div class="row2">
          <div style="font-size: 14px">
            类型
          </div>
          <div style="margin-top: 10px;">
            <nut-tag type="danger" plain> 全国通兑券 </nut-tag>
          </div>
        </div> -->
        <div class="row3">
          <div class="left">
            <span class="left-ixt">数量</span>
            <span class="left-num">库存{{ goodsDetail.stock }}件</span>

          </div>
          <div class="right"><nut-input-number v-model="goodsNum" /></div>
        </div>


      </div>
      <div class="detail-btn">
        <nut-button block type="primary" @click="handleConfirm">确定</nut-button>
      </div>
    </nut-popup>
    <div class="image-box">
      <image class="img" src="http://supportmaster.liangpiao.net.cn/chuanshuo.jpg" mode="widthFix" style="width: 100%">
      </image>
    </div>
    <div class="activtitiy-detail" :style="{ paddingBottom: `100px` }">
      <div class="price-data">
        <div class="title margintop">电影《传说》专属·全国通兑券</div>
        <div class="time margintop">时间:2024年07月12日-2023年07月30日</div>
        <div class="price margintop" v-if="goodsDetail.price"><span>￥</span><span>{{ (goodsDetail.price /
      100).toFixed(2) }}</span></div>
      </div>
      <div class="text-detail">
        <p class="marginTop-Tilte">使用说明:</p>
        <p class="margintop importantText">

          该全国通用券全部用于《传说》在万达影城的填场活
          动。由张艺兴资讯台统一选座填场，个人无权选座，一经购买无法退款。
        </p class="margintop">
        <p class="marginTop-Tilte">一 、操作步骤</p>





        <p class="margintop">
          1、扫码进入小程序，选择购买数量，购买后由万达统一 兑换，个人无权选座，一经购买无法退款，可以在“我的订单-已完成”查看订单兑换券票码。

        </p>
        <p class="margintop"> 2、兑换后出现“查看兑换”按钮，点击可查看该券所兑换的电影票信息（所填的影院，场次等）。兑换后自动与其他购票平台同步，可去核对占位。</p>
        <!-- <p class="margintop">
          3、兑换后出视“置者兑视“按钮，点由可查者该券所兑横
          的电影票信息【所增的影稿，场次警。兑换后自动与其
          怡购累零台同步，可去核对占拉。
        </p> -->
        <p class="marginTop-Tilte">二、注意事项</p>
        <p class="margintop">
          1、本次共发放总价50万元的传说通兑券，全国万达均可使用，可看余量知晓售卖进度。
        </p>
        <p class="margintop">2、全国传说专属通用券不可兑换现金、不能找零。</p>
        <p class="margintop">
          3、购买后本券由万达根据张艺兴资讯台的要求统一选座，个人无权选座，一经购买无法退款，取票后统一邮寄给张艺兴资讯台。
        </p>
        <p class="margintop">4、本次《传说》通用券兑换活动最终解释权归 @张艺兴资讯台所有。</p>
        <p class="marginTop-Tilte">三、剧情简介</p>
        <p class="margintop">
          前世情缘，梦中寻觅。家国太平，英雄铸成!延续《神话》的姊妹篇。房教授(成龙 饰)在考古时挖掘出神秘的萨满古玉，它引领着房教授和助手王靖(张艺兴
          饰)梦回西汉，化身骁勇善战的汉军将领，征战于无垠的河西草原，率骑兵抗击匈奴守护家国，并与匈奴公主梦云(娜扎
          饰)展开一段跨越千年的前世情缘。为寻真相，房教授和助手邀请好友雷振(李晨饰)深入万年冰川中找寻祭天圣地，欲揭开这段不为人知、横跨千古的传奇故事，却遭萨满专家赫伯尔(李治廷 饰)的阻挠...
        </p>
      </div>
    </div>
    <!-- <FixedTitle Title="首页"></FixedTitle> -->

    <!-- <custormTabbar ref="tabbar"></custormTabbar> -->
    <Footer @onBuy="handleBuy"></Footer>

  </view>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";
import custormTabbar from "../../components/Tabbar/index.vue";
import uaLoading from "../../components/pageLoading/index.vue";
const loadingstyle = ref(true);
import * as indexApi from '../../api/index.ts'
import Taro, { useDidShow, usePageScroll } from "@tarojs/taro";
import { createSelectorQuery } from "@tarojs/taro";
import FixedTitle from "../../components/FixedTitle/fixed-title.vue";
import Footer from './footer.vue'
import { storeToRefs } from "pinia";
import { useUserStore } from "../../store";
const userStore = useUserStore();
const { Userinfo, shareUserId, Token, openid } = storeToRefs(userStore);

// 监听页面滚动
const code = ref("")
const visibleFlag = ref(false)
const goodsNum = ref(1)
const state = reactive({
  msg: 'toast',
  type: 'text',
  show: false,
  cover: false,
  title: '',
  bottom: '',
  center: true
})
const goodsDetail = ref({

})
const handleBuy = () => {
  visibleFlag.value = true
}
useDidShow(() => {
  if (openid.value) {
    loginByOpenId(openid.value)
  } else {
    Taro.login({
      success: async function (res) {
        if (res.code) {
          console.log(res.code);

          Taro.showLoading({ title: "加载中", mask: true });
          code.value = res.code;
          geOpenIdByCode(res.code)
          Taro.hideLoading();
        } else {
          Taro.showToast({
            title: "获取code失败",
            icon: "error",
            duration: 2000,
          });
        }
      },
    });
  }



});

onMounted(() => {
  Taro.showShareMenu({
    withShareTicket: true
  })
  Taro.showLoading({
    title: "加载中...",
    mask: true
  })
  // Taro.showLoading({ title: "加载中", mask: true });
  // Taro.hideLoading();

})


const geOpenIdByCode = async (code) => {
  try {
    const result: any = await indexApi.getOpenId({ jsCode: code })
    console.log(result);
    if (result.data.openid) {
      userStore.setOpenid(result.data.openid);

    }

    if (result.data.openid && !Token.value) {
      loginByOpenId(result.data.openid)
    }

  } catch (error) {
    Taro.showToast({
      title: "获取openid失败",
      icon: "error"
    })

  }
}
const loginByOpenId = async (openId) => {
  try {
    const result: any = await indexApi.loginByOpenId({ openId })
    console.log(result);
    if (result.state == 200) {

      userStore.setToken(result.token);
      // userStore.getUserinfo();
      setTimeout(() => {
        goodsDetailById()

      }, 200)
    }
  } catch (error) {
    Taro.showToast({
      title: "登录失败",
      icon: "error"
    })

  }
}
const goodsDetailById = async () => {
  try {
    const result: any = await indexApi.goodsDetail({ productId: 1 })
    console.log(result);
    if (result.state == 200) {
      goodsDetail.value = result.data
    } else {
      Taro.showToast({
        title: "获取商品信息失败",
        icon: "none"
      })
    }
    Taro.hideLoading()

  } catch (error) {
    Taro.showToast({
      title: "网络错误",
      icon: "error"
    })
    Taro.hideLoading()

  }
}
const handleConfirm = () => {
  if (goodsNum.value < 1) {
    state.show = true
    console.log(456);

    return
  }
  Taro.redirectTo({
    url: `/pages/confirm/index?num=${goodsNum.value}&price=${goodsDetail.value.price}`
  })
}
</script>

<style lang="scss">
.home-container {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;

  .popup-movie-detail {
    margin-top: 50px;
    padding: 0 30px;

    .row1 {
      display: flex;
      justify-content: space-between;

      .right {
        margin-left: 20px;

        .goods-title {
          color: #333333;
          font-weight: 700;
        }

        .goods-price {
          margin-top: 25px;
          font-weight: 700;
          color: #ee0a24;
          display: flex;

        }
      }
    }

    .row3 {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        font-size: 26px;

        .left-ixt {}

        .left-num {
          margin-left: 15px;
        }
      }
    }
  }

  .detail-btn {
    margin-top: 60px;
    padding: 0 30px;
  }

  .image-box {
    width: 100%;

    // height: 400px;
    img {
      width: 100%;
      /* 最大宽度为容器宽度 */
      // height: 100%;
    }
  }

  .margintop {
    margin-top: 10px
  }

  .marginTop-Tilte {
    // margin-top: 20px;
    color: #333333;
    font-size: 30px;
    font-weight: 700;
  }

  .importantText {
    color: #ee0a24;
    font-size: 32px;
    font-weight: 700;
    background-color: #f7f8f9;
    // padding: 20px;
    border-radius: 6px;
  }

  .activtitiy-detail {
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;

    .price-data {
      .title {
        font-size: 30px;
        font-weight: 700;
        color: #333333;
      }

      .time {
        font-size: 26px;
        font-weight: 500;
        color: #858a99;
      }

      .price {
        font-size: 32px;
        font-weight: 700;
        color: #ee0a24;
        display: flex;
      }
    }

    background-color: #fff;
    padding: 20px;

    .text-detail {
      margin-top: 50px;
      font-size: 28px;
    }

  }
}
</style>
